<!-- 我要转单 -->
<template>
	<view class="transfer-order-page">
		<view class="search-all">
			<view class="search-content flex flex1">
				<image class="search-img" src="/static/sousuo.png"></image>
				<input placeholder="请输入同事名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch" placeholder-style="color:#8F8F8F;" />
				<view class="search-btn flex">搜索</view>
			</view>
		</view>
		<!-- 技师卡片 -->
		<radio-group name="apply">
			<block v-for="(i, j) in technicianList" :key="j">
				<view class="flex-align-center v-card" @click="lookTechnician(i.id, 0)">
					<view class="flex-column">
						<image class="i-img" :src="i.head"></image>
						<!-- <image class="avater-border" src="/static/avater-border.png"></image> -->
						<image class="new-border" src="/static/new-msg.png"></image>
						<!-- status:1 离线 2 在线 3 冻结 4 服务中 -->
						<view :class="i.status == 2 ? 'v-state' : 'v-state-ing'" class=" flex">{{ i.status == 2 ? '可服务' : '服务中' }}</view>
					</view>
					<view class="flex-columns flex1">
						<view class="m-top10">
							<view class="flex-between height66 p-left30">
								<view class="flex-auto-columns height40 v-name">
									<view class="font32">{{ i.technicianName }}</view>
									<view class="flex-align-center v-distance">
										<text class="iconfont icon-dingweiweizhi"></text>
										<view>此订单距离： {{ positionKm(i.latitude, i.accuracy) }}km</view>
									</view>
								</view>
								<!-- 拨打电话 -->
								<view class="call-cls flex" @click="callPhone(i.mobile)"><image mode="heightFix" src="/static/technician/call-icon.png"></image></view>
							</view>
						</view>
						<view class="flex-between p-left20 p-align-top20">
							<view class="left-detail flex-align-center">
								<view class="flex-align-center">
									<text class="iconfont icon-pinglun"></text>
									{{ i.commentCount }}
								</view>
								<view class="flex-align-center">
									<text class="iconfont icon-shoucang"></text>
									{{ i.collectCount }}
								</view>
								<view class="flex-align-center">
									<text class="iconfont icon-xiangqing"></text>
									详情
								</view>
							</view>
							<label class="sunui-margin-r10" @click.stop="technicianSel(i)" style="transform: scale(0.8);">
								<radio value="1" color="#67C23A" :checked="i.checked" />
							</label>
						</view>
					</view>
				</view>
			</block>
		</radio-group>
		<view class="flex fixed-btns">
			<view class="cancel-cls flex" @click="cancelClick">取消</view>
			<view class="agree-btn flex" @click="confirm">确认并转让</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchVal: '',
			technicianList: [], //查询到的可转单技师
			options: {}
		};
	},

	computed: {
		positionKm: function() {
			return function(y1, y2) {
				let x1 = uni.getStorageSync('lat');
				let x2 = uni.getStorageSync('lng');
				let positionKm = '';
				// this.$sun.getDistances(第一点的纬度, 第一点的经度, 第二点的纬度, 第二点的经度)
				positionKm = this.$sun.getDistances(x1, x2, y1, y2).km;
				return positionKm;
			};
		}
	},
	onLoad(options) {
		this.options = options; //上个页面传入的options
		console.log('options======', options);
	},
	onShow() {
		this.$at.releaseKey('submit');
		this.getTechnicians(); // 根据套餐id查询技师
	},
	methods: {
		// 拨打技师电话
		callPhone(phone) {
			this.$sun.phone(phone);
		},
		// 查看技师详情
		lookTechnician(id, isSpeak) {
			// this.$router.push('/demo/123#anchor')
			this.$sun.navGo('/pages/technician-detail/technician-detail', {
				id: id, // 传技师id
				isSpeak: isSpeak //1：是从评价点击进入，否则是详情点击进入
			});
		},
		//监听输入框输入的值
		changeInput() {},
		//输入键盘的搜索
		changeSearch() {
			this.getTechnicians();
		},
		close() {
			this.searchVal = '';
			this.getTechnicians();
		},
		//  查询可转单技师——我要转单
		async getTechnicians() {
			const result = await this.$http.get({
				url: this.$api.getSelectByTransferTechnician,
				data: {
					packageId: this.options.packageId, //套餐id
					accuracy: uni.getStorageSync('lng'), //经度（小数点类型）
					latitude: uni.getStorageSync('lat'), //纬度（小数点类型）
					siteId: this.options.siteId, // 站点id
					userId: this.options.userId, //登录用户的id
					technicianName: this.searchVal //搜索技师
				}
			});
			if (result.code == 200) {
				this.technicianList = result.data;
				if (this.technicianList.length > 0) {
					this.technicianList.forEach(item => {
						Object.assign(item, {
							checked: false
						});
					});
				}
				console.log(' 查询可转单技师——我要转单result.', result, this.technicianList);
			} else {
				this.$sun.toast(result.message);
			}
		},
		// 转单技师，选择
		technicianSel(i) {
			console.log('i', i);
			i.checked = i.checked == true ? false : true;
			this.technicianEvaluationId = '';
			this.technicianEvaluationId = i.checked == false ? {} : i.id; // 技师id（当前转单选中的技师id）
		},
		cancelClick() {
			this.$sun.navBack();
		},
		confirm() {
			if (!this.technicianEvaluationId) {
				this.$sun.toast('请选择您需要转单的技师');
			} else {
				this.$at.uniDoFunc({
					// 键名
					key: 'submit',
					success: async () => {
						//锁定
						this.$at.lockKey('submit');
						this.save();
					}
				});
			}
		},
		async save() {
			const result = await this.$http.put({
				url: this.$api.updateOrder,
				data: {
					id: Number(this.options.orderId), //订单id
					transferOrder: Number(this.options.transferOrder), // 需要转单技师id（old）
					technicianEvaluationId: this.technicianEvaluationId //技师id（当前转单选中的技师id）
				}
			});
			if (result.code == 200) {
				this.$sun.toast('转单成功！');
				setTimeout(() => {
					this.$sun.navBack();
					this.$at.releaseKey('submit');
				}, 1000);
			} else {
				this.$at.releaseKey('submit');
				this.$sun.toast(result.message);
			}
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f7f7;
}
.transfer-order-page {
	// 搜索
	.search-all {
		padding: 30rpx 20rpx;
		background: #fff;
		margin: 2rpx 0 22rpx;
		.search-content {
			border-radius: 100rpx;
			background: #f9f9f9;
			height: 80rpx;
			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx 0 30rpx;
			}
			input {
				flex: 1;
			}
			.search-btn {
				margin-left: 20rpx;
				color: #fff;
				font-size: 32rpx;
				width: 148rpx;
				height: 80rpx;
				border-radius: 48rpx;
				background: #19c866;
			}
		}
	}
	// 技师卡片
	.v-card {
		position: relative;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 0 20rpx;
		margin: 0 20rpx 20rpx;
		.i-img {
			width: 132rpx;
			height: 132rpx;
			border-radius: 50%;
		}
		.avater-border {
			position: absolute;
			top: 10rpx;
			width: 166rpx;
			height: 166rpx;
		}
		.new-border {
			position: absolute;
			top: 14rpx;
			left: 114rpx;
			width: 56rpx;
			height: 54rpx;
		}

		.v-state,
		.v-state-ing {
			margin-top: 20rpx;
			font-size: 20rpx;
			width: 106rpx;
			height: 36rpx;
			border-radius: 100rpx;
		}
		.v-state {
			color: #f1e6ae;
			background-image: linear-gradient(to right, #2a2e31, #4b5059);
		}
		.v-state-ing {
			color: #fff;
			background: linear-gradient(90deg, #efbc6f 0.94%, #e3c044 99.06%);
		}

		.height66 {
			height: 140rpx;
			border-bottom: 2rpx solid #f6f6f6;
		}
		.height40 {
			margin-top: 10rpx;
			height: 116rpx;
		}
		.v-name {
			.v-distance {
				text {
					font-size: 24rpx;
					margin-right: 4rpx;
					color: #19c866;
				}
				view {
					color: #666;
					font-size: 24rpx;
				}
			}
		}

		.call-cls {
			border-radius: 50%;
			width: 56rpx;
			height: 56rpx;
			background-color: #19c866;
			image {
				height: 32rpx;
			}
		}

		.left-detail {
			color: #999999;
			text {
				font-size: 32rpx;
				color: #999999;
				margin-right: 8rpx;
			}
			view {
				margin-right: 10rpx;
			}
		}
	}
	.fixed-btns {
		width: 100%;
		height: 140rpx;
		border-top: 2rpx solid #e7e7e7;
		background: #fff;
		position: fixed;
		bottom: 0;
		.cancel-cls {
			color: #1890ff;
			font-size: 32rpx;
			border-radius: 10rpx;
			border: 2rpx solid #1890ff;
			background: #fff;
			height: 80rpx;
			width: calc(30% - 20px);
			margin-right: 30rpx;
		}
		.agree-btn {
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			height: 80rpx;
			border-radius: 10rpx;
			background: #1890ff;
			width: calc(70% - 40px);
		}
	}
}
</style>
